<template>
  <div :class="screenClass">
    <table-container
      v-model:columns="columns"
      v-model:is-fullscreen="isFullscreen"
      :loading="isLoading"
      :all-columns="allColumns"
      @refresh="getData"
    >
      <template #container-side>
        <a-button type="primary" @click="hangdleAdd">添加</a-button>
        <a-button type="outline">退回协同</a-button>
        <a-button type="outline">Excel导入</a-button>
      </template>
      <a-table
        style="margin-top: 16px"
        :columns="columns"
        :data="renderData"
        :loading="isLoading"
        row-key="1"
        :scroll="scroll"
        table-layout-fixed
        :row-selection="rowSelection"
        :pagination="pagination"
        @page-change="pageChange"
      >
        <template #optional="{ record, rowIndex }">
          <a-space>
            <span class="btn-class" @click="handleDetail(record, rowIndex)"
              >详情</span
            >
            <span class="btn-class" @click="handleEdit(record, rowIndex)"
              >编辑</span
            >
            <a-dropdown @select="handleSelect">
              <span class="btn-class">...</span>
              <template #content>
                <a-doption @click="handleApproval">提交审批</a-doption>
                <a-doption>生成入库单</a-doption>
                <a-doption>删除</a-doption>
              </template>
            </a-dropdown>
          </a-space>
        </template>
      </a-table>
    </table-container>
    <invoiceDetail
      v-if="invoiceModuleShow"
      :select-obj="selectObj"
      :active-key="props.activeKey"
      @handleOk="handleInvoiceModuleOk"
    />
    <invoiceAdd
      v-if="invoiceAddModelShow"
      ref="invoiceAddRef"
      v-model="invoiceAddModelShow"
      :title="moduleTitle"
      :select-obj="selectObj"
      @handleOk="handleInvoiceAddModuleOk"
      @handleCancel="handleInvoiceAddModuleCancel"
    />
    <approvalModule
      v-if="approvalModuleShow"
      :select-obj="selectObj"
      @handleOk="handleApprovalModuleOk"
    />
  </div>
</template>

<script lang="ts" setup>
  import tableContainer from '@/common/components/table-container/index.vue';
  import { reactive, ref, watch } from 'vue';
  import { sleep } from '@/utils/tools';
  import lodash from 'lodash';
  import useFullScreen from '@/common/hooks/fullScreen';
  import { getInvoicePage } from '@/api/payment/invoiceMaintenance';
  import { Message } from '@arco-design/web-vue';
  import invoiceDetail from './invoice-detail.vue';
  import invoiceAdd from './invoice-add.vue';
  import { tableRenderConfig } from '../table-comp/invoice-table';
  import approvalModule from './approval-module.vue';

  const { isFullscreen, screenClass } = useFullScreen();
  const props = defineProps(['activeKey']);
  const tableObj = ref({});
  const selectObj = ref({});
  const invoiceModuleShow = ref(false);
  const invoiceAddModelShow = ref(false);
  const isFinishedProduct = ref(true);
  const approvalModuleShow = ref(false);
  const moduleTitle = ref('');
  const invoiceAddRef = ref();
  const scroll = {
    x: 2000,
    y: 200,
  };
  tableObj.value = {
    finishedProduct: [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18',
      '19',
      '20',
      '21',
      '22',
      '23',
      '24',
      '25',
      '39',
      '26',
      '27',
      '28',
      '54',
    ],
    rawMaterial: [
      '29',
      '1',
      '2',
      '3',
      '30',
      '5',
      '6',
      '7',
      '8',
      '9',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18',
      '19',
      '20',
      '21',
      '22',
      '23',
      '24',
      '25',
      '39',
      '26',
      '27',
      '28',
      '54',
    ],
    spareParts: [
      '29',
      '1',
      '2',
      '3',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18',
      '19',
      '20',
      '21',
      '22',
      '23',
      '24',
      '25',
      '39',
      '26',
      '27',
      '54',
    ],
  };
  const handleSelect = (v) => {
    console.log(v);
  };
  const columns = ref([]);
  watch(
    () => props.activeKey,
    (newProps: any) => {
      isFinishedProduct.value = props.activeKey === 'finishedProduct';
      gettableColums(newProps);
    }
  );
  const gettableColums = (val) => {
    columns.value = [];
    tableObj.value[val].forEach((v) => {
      Object.keys(tableRenderConfig).forEach((k) => {
        if (v === k) {
          columns.value.push(tableRenderConfig[k]);
        }
      });
    });
  };
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  // 分页，默认第1页，每页10条
  const basePagination = {
    current: 1,
    pageSize: 10,
    showPageSize: true,
    showTotal: true,
  };
  const pagination = reactive({
    ...basePagination,
  });
  const getTbDataByPage = async (reqdata: any = {}) => {
    const params = {
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      ...reqdata,
    };
    isLoading.value = true;
    try {
      const { data } = await getInvoicePage(params);
      renderData.value = data.list;
      pagination.total = Number(data.total); // 用Number函数转一下，否则f12控制台会有警告，很不好看
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      Message.warning({
        content: error,
      });
    } finally {
      isLoading.value = false;
    }
  };

  const pageChange = (pageNum) => {
    console.log(pageNum);
  };
  const handleDetail = (val) => {
    selectObj.value = val;
    invoiceModuleShow.value = true;
  };
  const handleEdit = (val) => {
    moduleTitle.value = '编辑';
    selectObj.value = val;
    invoiceAddModelShow.value = true;
  };
  const handleApproval = () => {
    approvalModuleShow.value = true;
  };
  const handleInvoiceModuleOk = () => {
    selectObj.value = {};
    invoiceModuleShow.value = false;
  };
  const handleInvoiceAddModuleOk = () => {
    selectObj.value = {};
  };
  const handleInvoiceAddModuleCancel = () => {
    selectObj.value = {};
  };
  const handleApprovalModuleOk = () => {
    selectObj.value = {};
    approvalModuleShow.value = false;
  };
  gettableColums(props.activeKey);
  const allColumns = lodash.cloneDeep(columns);
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);

  const getData = async () => {
    renderData.value = [];
    isLoading.value = true;
    await sleep(2000);
    const data = reactive([
      {
        1: '1',
        2: 'Jane Doe',
        3: 23000,
        4: '32 Park Road, London',
        5: 'jane.doe@example.com',
      },
      {
        1: '2',
        2: 'Alisa Ross',
        3: 25000,
        4: '35 Park Road, London',
        5: 'alisa.ross@example.com',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;
  };
  const hangdleAdd = () => {
    moduleTitle.value = '添加';
    invoiceAddModelShow.value = true;
  };
  getTbDataByPage();
</script>

<style lang="less" scoped>
  .arco-btn {
    margin-right: 16px;
  }

  .arco-btn-outline {
    color: #1e2228 !important;
    border-color: #d9dee7 !important;
  }

  .btn-class {
    color: #1e89ff;
    cursor: pointer;
  }
</style>
